<template>
  <div style="position: relative">
    <Header />
    <div id="container">
      <div class="plugin">
        <div class="direction"></div>
        <div class="zooming">
          <div class="big">+</div>
          <div class="slide"></div>
          <div class="small">-</div>
        </div>
      </div>
    </div>
    <div
      class="dialog1"
      v-show="flag"
      :style="{
        top: y + 'px',
        left: x - 200 + 'px',
      }"
    >
      <div class="logo"><img src="./map.png" alt="" /></div>
      <p class="pFontSize" style="margintop: 80px">
        当前位置在:
        <a href="javascript:;" style="color: pink">{{ address }}</a>
      </p>
      <p>暂时没有符合你择偶条件的用户，去切换城市试试看吧！</p>
    </div>
    <Footer />
  </div>
</template>
 
<script>
// import axios from 'axios'
export default {
  name: "Map",
  data() {
    return {
      x: "",
      y: "",
      address: "",
      flag: false,
    };
  },
  methods: {
    loadJScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=y9VBtLBQ03Af4SHcm6OpEEMkAlGLsNGm&services=&t=20210408201030";
      script.onload = () => {
        this.init();
      };
      document.body.appendChild(script);
    },
    init() {
      var map = new window.BMapGL.Map("container"); // 创建Map实例
      var point = new window.BMapGL.Point(116.331398, 39.897445);
      map.centerAndZoom(point, 12);
      map.enableScrollWheelZoom(true);
      var geoc = new window.BMapGL.Geocoder();
      //添加控件
      /*  map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl()); */
      map.addEventListener("click", async (e) => {
        console.log(e, e.offsetX);
        this.flag = true;
        this.x = e.offsetX;
        this.y = e.offsetY;
        const pt = e.latlng;
        geoc.getLocation(pt, (rs) => {
          // console.log("rs", rs);
          // var addComp = rs.addressComponents;

          this.address = rs.address;
        });

        /*  const res =  await axios({
        method:"GET",
        url:"/api",
        params:`/reverse_geocoding/v2/?ak=y9VBtLBQ03Af4SHcm6OpEEMkAlGLsNGm&location=${e.latlng.lng},${ e.latlng.lat}`
      }) */

        // console.log('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
      });
      map.addControl(new window.BMapGL.NavigationControl());
      map.addControl(new window.BMapGL.NavigationControl());
      map.addControl(new window.BMapGL.ScaleControl());
      // map.addControl(new window.BMapGL.OverviewMapControl());
      map.addControl(new window.BMapGL.MapTypeControl());
      var opts = {type: 'BMAP_NAVIGATION_CONTROL_SMALL'}    
      map.addControl(new BMap.NavigationControl(opts));
      map.setCurrentCity("北京");
    },
    /*  myMap() {
      this.map = new window.BMapGL.Map("container"); // 创建Map实例 注意要和你上面写的div的id名一样
      this.map.centerAndZoom(new window.BMapGL.Point(this.lng, this.lat), 12); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      //这里的配置很多，就不一一说明了，
    }, */
  },
  mounted() {
    this.loadJScript(); //
  },
};
</script>

<style lang="stylus" scoped>
#container
  // position relative
  overflow hidden
  width 100%
  height 100vh
  margin 0
  font-family '微软雅黑'
  .plugin
    position absolute
    width 100px
    height 300px
    background #333
    right 30px
    bottom 30px
.dialog1
  position absolute
  // display none
  width 250px
  height 300px
  background #fff
  z-index 999
  border 1px solid #333
  padding 70px 30px
  font-size 16px
  .logo
    display flex
    justify-content center
 
    
</style>
